
<header class="am-header am-header-default am-no-layout">
	<div class="am-header-left am-header-nav">
		<a ng-click="homePage()" class=""><i class="am-icon-home am-icon-sm"> </i></a>
	</div>
	<div class="am-header-right am-header-nav">
		<a ng-click="shoppingCart()" class=""><i class="am-icon-shopping-cart am-icon-sm"> </i></a> <a ng-click="showLogin();" class=""><i class="am-icon-user am-icon-sm"> </i></a>
	</div>
	<h1 class="am-header-title">
		<a>产品详情</a>
	</h1>
</header>

<div class="am-u-sm-12" style="padding: 0%;">
	<!-- 图片轮播  -->
	<div class="am-slider am-slider-a1 am-slider-manual" id="am-slider">
		<ul class="am-slides" id="am-slides">
			<li id="first"></li>
		</ul>
	</div>

	<hr />

	<div class="am-u-sm-12">
		<div class="am-padding-left-xs">
			<h4 class="am-serif am-text-secondary">
				<span data-ng-bind="product.description"></span>
			</h4>
			<h5 class="am-list-item-text">
				规格：<span data-ng-bind="product.specification"></span>
			</h5>
			<div class="am-btn-group am-btn-group-xs am-cf am-fr">
				<span class="am-btn am-btn-xs am-btn-default am-round" ng-click="minusProduct()"><i class="am-icon-minus"></i></span> <span class="am-btn am-btn-xs am-btn-default" id="buy_num" disabled>{{amount}}</span> <span class="am-btn am-btn-xs am-btn-default am-round" ng-click="addProduct()"><i class="am-icon-plus"></i></span>
			</div>
			<br /> <span style="color: red;"> ￥<span data-ng-bind="product.price"></span>
			</span>
		</div>
	</div>

	<p></p>

	<div class="am-u-sm-12" style="padding: 0%;">
		<!-- tabs -->
		<div data-am-widget="tabs" class="am-tabs am-tabs-d2" id="doc-my-tabs" style="margin: 0%;">
			<ul class="am-tabs-nav">
				<li class="am-active"><a href="[data-tab-panel-0]">商品详情</a></li>
				<li class=""><a href="[data-tab-panel-1]" data-ng-click="showComments()">用户评价</a></li>
			</ul>

			<div class="am-tabs-bd">
				<div data-tab-panel-0 class="am-tab-panel am-active" style="padding-left: 0%; padding-right: 0%;">
					<div class="am-u-sm-12" style="padding-left: 0%; padding-right: 0%;">
						<img class="am-u-sm-centered" style="padding-left: 0%; padding-right: 0%;" alt="" data-ng-src="{{ baseUrl+product.thumbId+formatImage }}">
					</div>
					<hr />
					<ul class="am-list am-in am-u-sm-12" id="collapse-nav" style="padding-left: 0%; padding-right: 0%;">
						<!--缩略图在标题左边-->
						<li style="padding: 0%; border: none;" class="am-g am-list-item-desced am-list-item-thumbed" data-ng-repeat="detail in Details">
							<div class="am-u-sm-12 am-list-thumb" style="padding-left: 0%; padding-right: 0%;">
								<img class="am-u-sm-centered" data-ng-src="{{ baseUrl+detail.image.split('_')[0]  }}" alt="">
							</div>
							<div class="am-u-sm-12 am-list-main">
								<h4 class="am-list-item-text am-u-sm-centered am-text-xl">{{ detail.detail }}</h4>
							</div>
						</li>
					</ul>
				</div>

				<div data-tab-panel-1 class="am-tab-panel">
					<div class="am-list-news-bd">
						<div class="am-list-news-bd">
							<ul class="am-list">
								<li class="am-g" data-ng-repeat="comment in comments"><span class="am-list-item-text am-padding-left-xs am-text-default" data-ng-bind="comment.userName"></span>
									<div class="am-u-sm-12 am-padding-left-xs">
										<span class="am-kai am-text-lg" data-ng-bind="comment.word"></span>
									</div>
									<div class="am-u-sm-12">
										<ul class="am-gallery am-avg-sm-3 am-avg-md-4  am-gallery-imgbordered">
											<li data-ng-repeat="item in comment.images.split(';')">
												<div class="am-gallery-item">
													<img data-ng-src="{{ baseUrl+item.split('_')[0]}}" src="https://farm4.staticflickr.com/3835/15329524682_2642280b33_z.jpg" alt="" data-rel="https://farm4.staticflickr.com/3835/15329524682_554d4c0886_k.jpg" />
												</div>
											</li>
										</ul>
									</div>
									<div class="am-list-item-text">
										<span class="am-text-default am-padding-left-xs"> {{ comment.postTime | date: 'yyyy-MM-dd hh:mm' }}</span>
									</div></li>
							</ul>
							<button class="am-u-sm-12 am-btn am-btn-success" data-ng-click="nextPage()">下一页</button>
						</div>
					</div>
				</div>

			</div>
		</div>
		<p></p>

		<div class="am-thumbnail" style="margin-bottom: 49px;">
			<h4 class="am-padding-left-xs am-sans-serif  am-text-danger am-text-lg">同类热销产品：</h4>
			<div class="am-slider am-slider-a2 am-slider-manual" id="am-slider2">
				<ul class="am-slides" id="am-slides">
					<li id="second"></li>
				</ul>
			</div>
		</div>

		<div class="am-alert am-alert-success" data-am-alert style="margin-bottom: 0px;">
			<button class="am-close am-text-warning" style="margin: -15px -5px auto auto;">×</button>
			<p class="am-cf">
				<span style="width: 60px" class="am-text-xs"> 没什么可给你，凭这大象与猩猩</span><a class="am-fr am-btn am-round am-btn-xs am-btn-warning" href="{{ downloadLink }}"> <i class="am-icon-download"></i>立即体验
				</a>
			</p>
		</div>


		<div class=" am-navbar" style="border: 1px solid rgba(221, 221, 221, 0.73);">
			<div class="am-u-sm-12 am-list-main am-btn-default " style="height: 49px; background-color: #f1f1f1; padding-right: 0%;">
				<div class="am-padding-vertical-xs">
					<span class="am-fr am-btn am-btn-sm am-btn-success" ng-click="pay();"> <i class="am-icon-shopping-cart"></i>立即购买
					</span> <span class="am-fr am-btn am-btn-sm am-btn-warning" ng-click="addShoppingCart()"> <i class="am-icon-shopping-cart"></i>加入购物车
					</span>
				</div>
			</div>
		</div>

		<!-- login -->
		<div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
			<div class="am-modal-dialog">
				<div class="am-modal-hd">请登录</div>
				<div class="am-modal-bd">
					<form name="formName">
						<div class="am-input-group">
							<span class="am-input-group-label"><i class="am-icon-user"></i></span> <input type="tel" maxlength="11" required data-ng-model="phone" class="am-form-field" placeholder="手机号">
						</div>
						<br>
						<div class="am-input-group">
							<span class="am-input-group-label"><i class="am-icon-lock"></i></span> <input type="password" required data-ng-model="pwd" class="am-form-field" placeholder="密码">
						</div>
					</form>
				</div>
				<div class="am-modal-footer">
					<div class="am-btn-group am-btn-group-justify">
						<button class="am-btn am-btn-success am-radius" role="button" data-ng-click="cancel()">取消</button>
						<button class="am-btn am-btn-primary am-radius" role="button" data-ng-click="login(phone,pwd);" data-ng-disabled="formName.$invalid">确定</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(function() {
		$('.am-slider').flexslider();
		$('#doc-my-tabs').tabs();
	});
</script>
